<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>classify</title>
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
    <script src="../public/jquery.serializejson.min.js"></script>
</head>

<body>
    <div id="toolbar">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="create()">新建</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="edit()">编辑</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="remove()">删除</a>
    </div>
    <div id="dlg" class="easyui-dialog" title="Basic Dialog" style="width:600px;height:400px;padding:10px" data-options="closed:true">
        <!-- 表单 -->
        <form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
            <!-- id -->
            <div style="display: none">
                <input class="easyui-textbox" name="_id" style="width:100%">
            </div>
            <!-- parentId -->
            <div style="display: none">
                <input class="easyui-textbox" name="parentId" style="width:100%">
            </div>
            <!-- text -->
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="text" style="width:100%" data-options="label:'text:',required:true">
            </div>
            <!-- type -->
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="type" style="width:100%" data-options="label:'type:',required:true">
            </div>
            <!-- 提交按钮 -->
            <div style="text-align:center;padding:5px 0">
                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submit()" style="width:80px">Submit</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
            </div>
    </div>
    <a href="javascript:;" class="easyui-linkbutton c1" style="width:120px" onclick="changeType(1)">新闻</a>
    <a href="javascript:;" class="easyui-linkbutton c2" style="width:120px" onclick="changeType(2)">游戏</a>
    <div id="mm" class="easyui-menu" style="width:120px;">
        <div onclick="create()" data-options="iconCls:'icon-add'">新建</div>
        <div onclick="edit()" data-options="iconCls:'icon-edit'">重命名</div>
        <div onclick="remove()" data-options="iconCls:'icon-remove'">删除</div>
    </div>
    <div id="tt"></div>
    <script>
        var pid = {};
        var id = {};
        $('#tt').tree({
            url: 'http://localhost:3000/cate/list/1',
            method: 'post',
            onClick: function (node) {
                // console.log(node);
                pid = {
                    parentId: node._id
                }
                id = {
                    text: node.text,
                    type: node.type,
                    parentId: node.parentId,
                    _id: node._id
                }

            },
            onContextMenu: function (e, node) {
                e.preventDefault();
                // console.log(node);
                pid = {
                    parentId: node._id
                }
                id = {
                    text: node.text,
                    type: node.type,
                    parentId: node.parentId,
                    _id: node._id
                }
                $('#mm').menu('show', {
                    left: e.pageX,
                    top: e.pageY
                });
            }
        });

        function changeType(type) {
            $('#tt').tree({
                url: 'http://localhost:3000/cate/list/' + type,
                method: 'post'
            });
        }
        //新建
        function create() {
            console.log(pid);
            $('#ff').form('load', pid);
            $('#dlg').dialog('open');
        }
        //修改
        function edit() {
            $('#ff').form('load', id);
            $('#dlg').dialog('open');
        }
        //删除
        function remove() {
            $.messager.confirm('提醒', 'Are you confirm this?', function (r) {
                if (r) {
                    $.ajax({
                        url: 'http://localhost:3000/cate/removes',
                        type: 'post',
                        data: {
                            id: id._id
                        }
                    }).done(function (data) {
                        $('#tt').tree('reload'); //表格数据刷新
                    });
                }
            });


        }
        // 表单提交
        function submit() {
            $('#ff').form('submit', {
                onSubmit: function () {
                    var formData = $('#ff').serializeJSON();

                    if (formData._id) {
                        if (formData.parentId === "") {
                            formData.parentId = null;
                        }
                        console.log(formData);
                        $.ajax({
                            type: 'put',
                            url: `http://localhost:3000/cate/${formData._id}`,
                            data: formData,
                        }).done(res => {
                            $('#tt').tree('reload'); //表格数据刷新
                        })
                        $('#dlg').dialog('close'); //关闭对话框
                        $('#dlg').form('clear');
                    } else {
                        delete formData._id;
                        if(formData.parentId===''){
                            delete formData.parentId;
                        }
                        if ($(this).form('enableValidation').form('validate')) {
                            $.ajax({
                                type: 'post',
                                url: 'http://localhost:3000/cate',
                                data: formData,
                            }).done(res => {
                                $('#tt').tree('reload'); //表格数据刷新
                            })
                            $('#dlg').dialog('close'); //关闭对话框
                            $('#dlg').form('clear');
                        } else {
                            console.log('aaa');
                        }
                    }
                }

            });

        }
    </script>
</body>

</html>